<template>
  <div class="answer-list">
    <heads title="详情"></heads>
    <div class="main-content">
      <template v-if="detail">
        <!-- 寄件人信息 -->
        <van-cell-group>
                    <van-cell value>
            <template #default>
              <div class="item flex">
                <span class="key">发布日期：</span>
                <span class="value">{{ detail.issueTime }}</span>
              </div>
            </template>
          </van-cell>
          <van-cell value>
            <template #default>
              <h1 class="cell-title">{{ detail.issueType === 1 ? '收购信息' : detail.issueType === 2 ? '出售信息' : '服务信息'}}</h1>
              <div class="item flex">
                <span class="key">类目：</span>
                <span class="value">{{ detail.infoTypeName1 }}--{{ detail.infoTypeName2 }}--{{ detail.infoTypeName3 }}</span>
              </div>
            </template>
          </van-cell>
          <van-cell value>
            <template #default>
              <div class="item flex">
                <span class="key">细分品名：</span>
                <span class="value">{{ detail.keyword }}</span>
              </div>
            </template>
          </van-cell>
               <van-cell value>
            <template #default>
              <div class="item flex flex-start">
                <span class="key">国家：</span>
                <span class="value">{{ detail.countryName }}</span>
              </div>
            </template>
          </van-cell>
          <van-cell value>
            <template #default>
              <div class="item flex flex-start">
                <span class="key">产地：</span>
                <span class="value">{{ detail.provinceName }}-{{ detail.cityName }}-{{ detail.countyName }}</span>
              </div>
            </template>
          </van-cell>
          <van-cell value>
            <template #default>
              <div class="item flex">
                <span class="key">交易截止日期：</span>
                <span class="value">{{ detail.endTime }}</span>
              </div>
            </template>
          </van-cell>
           <van-cell value>
            <template #default>
              <div class="item flex">
                <span class="key">长度：</span>
                <span class="value">{{ detail.length }}毫米</span>
              </div>
            </template>
          </van-cell>
            <van-cell value>
            <template #default>
              <div class="item flex">
                <span class="key">细度：</span>
                <span class="value">{{ detail.fineness }}毫米</span>
              </div>
            </template>
          </van-cell>
                <van-cell value>
            <template #default>
              <div class="item flex">
                <span class="key">含绒率：</span>
                <span class="value">{{ detail.downContent }}%</span>
              </div>
            </template>
          </van-cell>
            <van-cell value>
            <template #default>
              <div class="item flex flex-start">
                <span class="key">数量：</span>
                <span class="value">{{ detail.stock }}吨</span>
              </div>
            </template>
          </van-cell>
                 <van-cell value>
            <template #default>
              <div class="item flex">
                <span class="key">价格：</span>
                <span class="value">￥{{ detail.unitPrice }}元</span>
              </div>
            </template>
          </van-cell>
            <van-cell value>
            <template #default>
              <div class="item flex flex-start">
                <span class="key">发布内容：</span>
                <span class="value">{{ detail.issueContent ? detail.issueContent : '暂无' }}</span>
              </div>
            </template>
          </van-cell>
                <van-cell value>
            <template #default>
              <div class="item">
                <span class="key">文件列表：</span>
                <div class="value flex flex-start">
                  <div class="img" :style="{backgroundImage:'url('+item+')'}" v-for="(item,index) in detail.pictureUrls" :key="index">

                  </div>
                </div>
              </div>
            </template>
          </van-cell>
 
          <van-cell value>
            <template #default>
              <div class="item flex flex-start">
                <span class="key">说明：</span>
                <span class="value">{{ detail.remark ? detail.remark : '暂无' }}</span>
              </div>
            </template>
          </van-cell>
         
        </van-cell-group>
       
      </template>
      <div v-else class="empty-box">没有更多数据了</div>

     
    </div>
     <div class="btn-box flex">
        <div class="collect flex" @click="collectChange">
          <van-icon size="20" :name="detail.isCollect === 1 ? 'star' : 'star-o'" :color="detail.isCollect === 1 ? '#ffd21e' : '#eee'"/>
          <p>收藏</p>
        </div>
        <van-button :to="`/chat/${ encodeURIComponent(detail.issueUserAvatar) }/${ detail.issueUserId }`" type="info" class="btn-common" native-type="submit">聊一聊</van-button>
       
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { mapState } from 'vuex'
import { Toast, Dialog } from "vant";

Vue.use(Dialog);//弹框

export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve)
  },
  data() {
    return {
      detail: {
        isCollect:0
      }
    };
  },
    watch: {
    '$route.params.id':{
      handler(newVal,oldVal){
         this.getData();
      },
      immediate:true

    }
  },
    computed:{
    ...mapState(['roles','userInfo'])

  },
  methods: {
    // 收藏
    collectChange(){
      let _this = this
      
       let _param = {
         "flag": _this.detail.isCollect === 0 ? 1 : 0,
         "targetId":  _this.$route.params.issueId,
         userId: _this.userInfo.userId,
       }
      Dialog.confirm({
        title: "提示",
        message: _this.detail.isCollect === 0 ? '确认收藏吗' : "确认取消收藏吗"
      })
        .then(() => {
          // on confirm
          this.$ajax
            .post(`${this.$baseUrl}/portal/userCollect/addOrUpdateCollect`, _param)
            .then(function(res) {
              if (res.data.code == 200) {
                if(_this.detail.isCollect === 0){
                  _this.detail.isCollect = 1
                   Toast("收藏成功！");
                   return
                }
                 if(_this.detail.isCollect === 1){
                  _this.detail.isCollect = 0
                   Toast("取消收藏成功！");
                }
                // Toast("取消成功");
                // setTimeout(() => {
                //   _this.$router.go(-1);
                // }, 2000);
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    getData() {     
      let _this = this;
      this.isLoading = true;
      let _param = {
         "detailId": _this.$route.params.id,
        "issueId": _this.$route.params.issueId,
        userId: _this.userInfo.userId,
      }
      this.$ajax
        .post(`${this.$baseUrl}/portal/issues/getIssueDetail`, _param)
        .then(function(res) {
          if (res.data.code == 200) {
            _this.detail = res.data.data[0];
            _this.isLoading = false
          }
        })
        .catch(function(error) {
          console.log(error);
        });

    },
    goReview() {
      // this.$router.push({ path: `/review/${this.$route.params.id}` });
    },
    collect() {
       let _this = this;
      
    }
  },
  created() {
   
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.answer-list {
  .main-content {
    min-height: 92vh;
    margin-top: 0;
    padding: 0.3rem;
    box-sizing: border-box;
  }
  /deep/ .van-cell-group {
    border-radius: 0.1rem;
    margin-bottom: 0.3rem;
    .cell-title {
      font-size: 0.3rem;
      padding: 0 .3rem;
      margin-bottom: .4rem!important;
      border-left: 4px solid #5bbd97;
      display: block;
      i {
        font-size: 0.24rem;
        color: #999;
        padding-left: 0.3rem;
      }
    }
    .van-cell {
      background: transparent;
      .item {
        font-size: 0.28rem;
        color: #999;
        justify-content: flex-start;
        .img{
          width: 1.4rem;
          height: 1.4rem;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          border-radius: 5px;
          margin: 8px 8px 8px 0;
        }
        &.order-progress {
          .key {
            width: 100px;
          }
        }
        .key {
          // width: 50px;
        }
        .value {
          flex: 1;
          color: #323233;
        }
      }
    }
    .color-primary {
      font-size: 0.28rem;
    }
  }
  .btn-box {
    padding:.2rem .3rem;
    background: #fff;
    position: fixed;
    left: 0;
    bottom:0;
    box-sizing: border-box;
    width: 100%;
    button {
       flex:3;
      // line-height: 0.88rem;
      // width: 100%;
      border-radius: 5px;
      // color: #fff;
      // border-color: #bebebe;
      // background: #bebebe;
    }
    .collect{
      flex:1;
      flex-direction: column;
      padding-right: .3rem;
      p{
        font-size: .28rem;
       flex:1;
      }

    }
  }
}
</style>
